<template>
  <div class="banner">
    <img class="banner_bg" src="" alt />
    <div class="banner_mask">
      <span class="mask_tit">XSY TECHNOLOGY</span>
      <span class="mask_center">科技助力金融，让金融更<span>智慧</span></span>
      <span class="mask_bottom">关于更多翔盛悦科技的介绍</span>

      <el-row class="business_scope">
        <div class="business_scope_item">
          <i class="iconfont iconicon7"></i>
<!--          <img src="../assets/image/home/business_scope_1.png" alt="" />-->
          <span>业务解决方案</span>
        </div>
        <span class="line"></span>
        <div class="business_scope_item">
          <i class="iconfont iconicon6"></i>
<!--          <img src="../assets/image/home/business_scope_2.png" alt="" />-->
          <span>定制软件开发</span>
        </div>
        <span class="line"></span>
        <div class="business_scope_item">
          <i class="iconfont iconicon5"></i>
<!--          <img src="../assets/image/home/business_scope_3.png" alt="" />-->
          <span>IT项目外包</span>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {

};
</script>

<style lang="scss">
.banner {
  position: relative;

  .banner_bg {
    content: url("../assets/image/home/banner.png");
    width: 100%;
  }

  .banner_mask {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*background: rgba(0, 0, 0, 0.3);*/
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;

    .mask_tit {
      font-size: $fz28;
    }
    .mask_center {
      font-size: $fz36;
      vertical-align: bottom;
      span {
        font-size: $fz64;
        color: $primary;
      }
    }
    .mask_bottom {
      font-size: 16px;
    }

    .business_scope {
      display: flex;
      justify-content: center;
      margin-top: 50px;

      .business_scope_item {
        padding: 0 47px;

        .iconfont {
          display: block;
          margin: 0 auto;
          margin-bottom: 5px;
          font-size: $fz30;
        }
      }
      .line {
        display: inline-block;
        height: 47px;
        margin-top: 9px;
        border-left: 1px solid white;
      }
    }
  }
}
.banner img {
  display: block;
  width: 100%;
}

@media screen and (min-width: 415px) {
  .banner {
    min-width: 1024px;

    .banner_bg {
      min-width: 1024px;
    }
  }
}

/**
移动端样式
 */
@media screen and (max-width: $mobile_width) {
  .banner {
    .banner_bg {
      content: url("../assets/image/home/banner_m.png");
    }

    .banner_mask {
      margin-top: 20px;
      .mask_tit {
        font-size: 9px;
      }
      .mask_center {
        font-size: 14px;
        vertical-align: bottom;
        span {
          font-size: 25px;
          color: $primary;
        }
      }
      .mask_bottom {
        font-size: 9px;
      }

      .business_scope {
        margin-top: 42px;

        .business_scope_item {
          padding: 0 15px;
          img {
            margin: 0 auto;
            margin-bottom: 5px;
            width: 18px;
            height: 18px;
          }
          span {
            font-size: 11px;
          }
        }
        .line {
          display: inline-block;
          height: 23px;
          margin-top: 9px;
          border-left: 1px solid white;
        }
      }
    }
  }
}
</style>
